import { map } from "lodash";
import React, { useState, useCallback,useEffect } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Select from "antd/lib/select";
import Input from "antd/lib/input";
import InputNumber from "antd/lib/input-number";
import Tabs from "antd/lib/tabs";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import notification from "@/services/notification";
import { Dashboard } from "@/services/dashboard";

const { Option } = Select;
const { TabPane } = Tabs;

function AddContainerDialog({ dialog, dashboard, widget }) {
  const [widgetOptions, setWidgetOptions] = useState({type:'container'});
  const [dashboardsAll, setDashboardsAll] = useState([]);

  useEffect(() => {
    if (widget.options) {
      if (widget.options.widgetOptions) {setWidgetOptions(widget.options.widgetOptions);}
    }
  },[widget]);

  useEffect(() => {
    Dashboard.publish()
    .then(results => {setDashboardsAll(results);})
    .catch(() => []);
  },[]);

  function processChange(key, value) {
    let ps = {...widgetOptions}
    ps[key] = value

    setWidgetOptions(ps);
  }

  const saveWidget = useCallback(() => {
    if (widgetOptions.hasOwnProperty("dashboard_id")) {
      dialog.close({ widgetOptions }).catch(() => {
        notification.error("报表容器未能添加！");
      });
    } else {
      notification.error("加载报表不能为空！");
    }
  }, [dialog, widgetOptions]);

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title={Object.getOwnPropertyNames(widget).length === 0 ? "添加报表容器" : "编辑报表容器：" + widget.id}
      onOk={saveWidget}
      okButtonProps={{
        ...dialog.props.okButtonProps,
        disabled: dialog.props.okButtonProps.disabled,
      }}
      okText={Object.getOwnPropertyNames(widget).length === 0 ? "添加至报表" : "确定"}
      cancelText="取消"
      width={700}
    >
    <Tabs accordion defaultActiveKey={['TabSet']}>
      <TabPane tab="基本设置" key="TabSet">
      <div data-test="AddWidgetDialog">
        容器显示报表：
        <Select style={{ width: 300 }} 
            value={widgetOptions && widgetOptions.dashboard_id}
            onChange={value => processChange("dashboard_id", value)}>
          {map(dashboardsAll, dash => (dash.id !== dashboard.id) && (
            <Option value={dash.id}>{dash.name}</Option>
          ))}
        </Select>
      </div>  
      <div>
        <br/>
        部件个性标题：
        <Input type="text" style={{width:300}}
          value={(widgetOptions && widgetOptions.widget_title) || ""}
          title="支持HTML5语法"
          onChange={e => processChange("widget_title", e.target.value)}
        />
        &nbsp;&nbsp;
        <Checkbox
          name="title_center"
          checked={widgetOptions && widgetOptions.title_center}
          onChange={e => processChange("title_center", e.target.checked)}>
          部件标题居中
        </Checkbox>  
        <br/>
        (支持url取数函数)<a href="https://www.dazdata.com/docs/college/markdown/3.html" target="_blank" rel="noopener noreferrer">官网指南</a>；例：&#123;&#123;&quot;parameter&quot;:&quot;id&quot;&#125;&#125;
      </div>  
      <div>
        <br/>
        容器部件间距：
        <InputNumber style={{width:100}}
          value={(widgetOptions && widgetOptions["widget_margins"]) || "0"} 
          onChange={value => processChange("widget_margins", value)}
        />
        &nbsp;&nbsp;
        <br/>
        部件圆角弧度：
        <InputNumber style={{width:100}}
          value={(widgetOptions && widgetOptions["widget_radius"]) || "0"} 
          onChange={value => processChange("widget_radius", value)}
        />
      </div>  
      <div>
        <br/>
        部件边框样式：
        <Select style={{ width: 200 }} 
          value={widgetOptions && widgetOptions.widget_border}
          onChange={value => processChange("widget_border", value)}>
        <Option value=''>--无边框--</Option>
        <Option value='line'>单线框</Option>
        <Option value='border'>四角加粗</Option>
        <Option value='bold'>线框四角加粗</Option>
        <Option value='middle'>线框四角加粗(标题栏居中)</Option>
        <Option value='cloud'>四角祥云</Option>
        <Option value='linecloud'>线框四角祥云</Option>
        </Select>
        &nbsp;&nbsp;
        <Checkbox
          name="widget_bgtransparent"
          checked={widgetOptions && widgetOptions.widget_bgtransparent}
          onChange={e => processChange("widget_bgtransparent", e.target.checked)}>
          部件背景透明（不应用部件背景样式）
        </Checkbox>  
        <Checkbox
          name="widget_toplayer"
          checked={widgetOptions && widgetOptions.widget_toplayer}
          onChange={e => processChange("widget_toplayer", e.target.checked)}>
          置于顶层
        </Checkbox>  
        <Checkbox
          name="widget_noscroll"
          checked={widgetOptions && widgetOptions.widget_noscroll}
          onChange={e => processChange("widget_noscroll", e.target.checked)}>
          禁止滚动条
        </Checkbox>  
        <Checkbox
          name="widget_nomenu"
          checked={widgetOptions && widgetOptions.widget_nomenu}
          onChange={e => processChange("widget_nomenu", e.target.checked)}>
          禁止菜单(Portal模式)
        </Checkbox>  
      </div>  
      <div>
        <br/>
        <Checkbox
          name="hide_parameters"
          checked={widgetOptions && widgetOptions.hide_parameters}
          onChange={e => processChange("hide_parameters", e.target.checked)}>
          隐藏报表筛选区
        </Checkbox>  
        <Checkbox
          name="widget_hidepopmenus"
          checked={widgetOptions && widgetOptions.widget_hidepopmenus}
          onChange={e => processChange("widget_hidepopmenus", e.target.checked)}>
          隐藏部件另存菜单
        </Checkbox>  
      </div>
      <div>
        <br/>
        使用容器注意事项：<br/>
        1、建议不要选择已含有容器部件的报表，否则容易导致循环调用。<br/>  
        2、含Markdown部件的报表请谨慎选择，含Markdown视图的报表则可以正常使用。<br/>  
        3、容器内报表所有部件建议选择隐藏标题区、筛选区和刷新区等.
        <br/>
      </div>
      </TabPane>
      <TabPane tab="多报表" key="tabViews">          
      <div>
        多视图风格：
        <Select style={{ width: 200 }} 
          value={(widgetOptions && widgetOptions.toggle_view_style) || "Dropdown"} 
          onChange={value => processChange("toggle_view_style", value)}>
          <Option value='Dropdown'>下拉菜单切换</Option>
          <Option value='Menu'>导航菜单切换</Option>
          <Option value='Radio'>单选框切换</Option>
        </Select>
        下拉菜单提示标题：
        <Input type="text" style={{width:200}}
          value={(widgetOptions && widgetOptions.toggle_view_title)}
          disabled={widgetOptions && widgetOptions.toggle_view_style === 'Menu' ? true : false}
          onChange={e => processChange("toggle_view_title", e.target.value)}
        />
      </div>
      {["1","2","3","4","5"].map(item => (
        <div data-test="AddWidgetDialog">
          <br/>
          附加报表{item}：
          <Select style={{ width: 300 }} 
              value={widgetOptions && widgetOptions["toggle_dashboard" + item]}
              onChange={value => processChange("toggle_dashboard" + item, value)}>
            <Option value="">[无]</Option>
            {map(dashboardsAll, dash => (dash.id !== dashboard.id) && (
              <Option value={dash.id}>{dash.name}</Option>
            ))}
          </Select>
          <br/>
          个性标题{item}：
          <Input type="text" style={{width:113}}
            value={(widgetOptions && widgetOptions["toggle_dashboard" + item + "_title"]) || ""}
            onChange={e => processChange("toggle_dashboard" + item + "_title", e.target.value)}
          />
          图标{item}：
          <Input type="text" style={{width:140}}
            value={widgetOptions && widgetOptions["toggle_dashboard" + item + "_icon"]} 
            onChange={e => processChange("toggle_dashboard" + item + "_icon", e.target.value)}
          />
          <a href="https://ant.design/components/icon-cn/" rel="noopener noreferrer" target="_blank">AntD_V4图标</a>如：FileDoneOutlined
        </div>  
        ))}
        <br/>
      </TabPane>
    </Tabs>
    </Modal>
  );
}

AddContainerDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  widget: PropTypes.object,
};

AddContainerDialog.defaultProps = {
  widget: {},
};

export default wrapDialog(AddContainerDialog);
